<template>
  <div class='content'>
    <el-row type='flex' justify='space-between' align='middle' class='searchBox'>
      <!-- 查询条件 -->
      <el-col :span='20'>
        <el-row type='flex' justify='start'>
          <el-col :span='6'>
            运输单位名称:
            <el-input style='width: 200px' v-model='model.name' placeholder='请输入运输单位名称' clearable />
          </el-col>
        </el-row>
      </el-col>

      <el-col :span='4'>
        <el-button type='primary' @click='search'>搜索</el-button>
        <el-button type='success' @click='add'>新增</el-button>
        <el-button type='danger' @click='delBatch'>批量删除</el-button>
      </el-col>
    </el-row>

    <!-- table -->
    <el-card>
      <el-table class='tableForm' ref='multipleTable' :data='tableData' v-loading='tableloading' border @selection-change='handleSelectionChange'>
        <el-table-column type='selection' width='55'></el-table-column>
        <el-table-column type='index' label='序号' :index='indexMethod'></el-table-column>

        <el-table-column prop='name' label='运输单位名称' align='center'>
          <template slot-scope='scope'>
            <el-link type='primary' @click='edit(scope.row)'>{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>

        <el-table-column prop='contactNumber' label='联系电话' align='center'></el-table-column>

        <el-table-column prop='unitQualification' label='相关资质' align='center'>
          <template slot-scope='scope'>
            <!-- 点击预览 -->
            <div v-for='(item, index) in scope.row.attrs' :key='index'>
              <el-link type='primary' @click='preViewFile(item)'>{{ item.name + '&nbsp;&nbsp;' }}</el-link>
              <br />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop='createdDate' label='创建时间' align='center'></el-table-column>

        <!-- <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="editUser(scope.row)" type="text" size="mini">编辑</el-button>
            <el-button @click="del(scope.row)" type="text" size="mini">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page='model.current'
        :page-sizes='[10, 20, 30]'
        :page-size='model.size'
        layout='total, sizes, prev, pager, next, jumper'
        :total='model.total'
      ></el-pagination>

    </el-card>

    <!-- 添加用户弹框 -->
    <add v-if='addVisible'></add>

    <!-- 编辑弹框 -->
    <edit v-if='editVisible' :editItem='editItem'></edit>

    <el-dialog
      title='预览文件'
      :visible.sync='preViewShow'
      width='70%'
      :before-close='()=>{this.preViewShow=false;}' :show-close='true' :close-on-click-modal='false'
      :close-on-press-escape='true'
      ref='documentPreviewDialog'>
      <document-preview :previewInfo.sync='preViewInfo' style='width: 100%;height: 50rem'
                        ref='documentPreview'></document-preview>
    </el-dialog>

  </div>
</template>
<script>
import add from './transoprt/add';
import edit from './transoprt/edit';

import DocumentPreview from '@/components/common/DocumentPreview';

export default {
  components: {
    add, edit, DocumentPreview,
  },
  data() {
    return {
      tableData: [],
      delList: [],
      tableloading: false,

      preViewShow: false,
      preViewInfo: {},

      model: {
        name: '',

        current: 1,
        size: 10,
        total: 0,
      },
      //添加用户
      addVisible: false,
      //编辑用户
      editVisible: false,
      editItem: {},
    };
  },
  created() {
    this.search();
  },
  mounted() {
    this.$ge.$on('biz-transportation-unit-change-search', () => {
      this.addVisible = false;
      this.editVisible = false;
      this.search();
    });
  },
  methods: {
    preViewFile(row) {
      this.preViewShow = true;
      this.preViewInfo = row;
      // this.$ge.$emit('preview-document-reload',true);
    },
    // 分页 ( 当页数量改变 )
    handleSizeChange(val) {
      this.model.size = val;
      this.search();
    },
    // 分页 （ 页码改变 ）
    handleCurrentChange(val) {
      this.model.current = val;
      this.search();
    },
    //查询列表
    search() {
      this.tableloading = true;
      this.$get('/biz-transportation-unit/pageList', this.model)
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.tableData = result.data.records;

            this.model.size = result.data.size;
            this.model.total = result.data.total;
            this.model.current = result.data.current;
          }
          this.tableloading = false;
        })
        .catch((error) => {
          //异常暂定为空
          this.tableData = [];
          this.tableloading = false;
        });
    },

    //添加
    add() {
      this.addVisible = true;
    },
    //编辑用户
    edit(row) {
      this.editVisible = true;
      this.editItem = row;
    },
    // 批量删除
    handleSelectionChange(val) {
      this.delList = val;
    },
    //删除
    delBatch() {
      if (this.delList.length == 0) {
        this.$message.warning('请勾选列表左侧要删除的数据')
        return;
      }
      let ids = this.delList.map(item => item.id)
      this.$confirm(
        '删除后无法恢复是否确认删除？',
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(() => {
          this.$postJson('/biz-transportation-unit/delBatch', ids)
            .then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.$refs.multipleTable.clearSelection();
                this.search();
              } else this.$message.error(result.msg);
            })
            .catch((error) => {
              //删除异常
              this.$message.error('删除异常');
            });
        })
        .catch(() => {
          //取消事件
        });
    },

  },
};
</script>
<style scoped>

</style>
